<template>
  <!-- 基本表单验证：
        1：表单元素的值双向绑定
        2：el-form
             model:整个表单元素值的对象
             rules:规则
                {
                  prop的值:[
                     {
                      required:true,message:'错误信息',trigger:'change/blur'
                     },
                     {
                      min:'最小长度',max:'最大长度',message:'错误信息',trigger:'change/blur'
                     },
                     {
                      pattern:正则表达式,message:'错误信息',trigger:'change/blur'
                     }
                  ]
                }
           el-form-item
               prop:表单元素值的字段名

      全局表单验证
        1:基本表单验证已完成
        2：el-form   ref='form'
        3:  this.$refs.form.validate((result)=>{ true:验证通过  false:验证失败  })
            try{
                await this.$refs.form.validate()
                // 成功
            }catch{   // 失败   }
 -->

  <div>
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="手机号" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
    </el-form>
    <el-button @click="submit">提交</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'change' },
          {
            min: 11, max: 11, message: '请输入手机号', trigger: 'change'
          },
          {
            pattern: /^1[3-9]\d{9}$/, message: '请正确输入手机号', trigger: 'change'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          {
            min: 6, max: 12, message: '请输入6-12位密码', trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    async submit() {
      // this.$refs.form.validate((result) => {
      //   console.log(result)
      // })
      // this.$refs.form.validate().then(() => {
      //   console.log('then')
      //   // 验证通过
      // }).catch(() => {
      //   console.log('catch')
      //   // 验证失败
      // })
      // try {
      //   await this.$refs.form.validate()
      //   console.log('成功')
      // } catch {
      //   console.log('失败')
      // }
      // await this.$refs.form.validate()
      // console.log('成功')
    }
  }
}
</script>
<style>
</style>
